<template>
    <div class="minMap_box">
        <div id="minMap" ref="minMap"></div>
        <!-- <div class="minMap_buttons">
            <el-button @click="fun">按钮</el-button>
        </div> -->
    </div>
    
</template>
  
<script>
import AMapLoader from '@amap/amap-jsapi-loader';

let Map = null;
let AMap = null;
let markerList = {};

export default {
name: "minMap",
data() {
    return {
        mapstate: null,
        weixingState:false,
        zoomCtrlState:false,
        controlBarState:false,
        

        stringLalo:'', // string 保存的字符串
        mapStyle:'',

        fenceShape:null, // circle / polygon
        infoWindow:true, // 信息窗体
    };
},
components:{

},
created() {
},
mounted() {

},
methods: {
    fun(){
        console.log('fun fenceMap');
        /* 
        Map.on('moveend', () => console.log('移动结束执行')); //移动结束执行
        Map.on('zoomend', () => console.log('缩放结束')) //缩放结束执行
        this.map.setZoom(13); //设置缩放级别
        this.map.setZoomAndCenter(16, [115.901377,35.601156], false, 2000); // 设置中心点
        this.map.setPitch(45, false, 2000); //设置地图俯仰角
        this.map.setRotation(40, false, 2000); // 动画角度
        //rotateend 地图旋转 rotation 结束时触发
        console.log(this.map.getLayers());//获取地图图层数组 */
    },
    mapButton(e){
        console.log(e.lnglat.getLng()+','+ e.lnglat.getLat());
    },
    //加载高德地图
    addMapCase(){
        return new Promise((resolve, reject)=>{
            if(this.mapstate !== null){
                reject('map error');
                return;
            };
            AMapLoader.load({
                "key": "aa710f496404ee0f3af9f770b8592c73",              // 申请好的Web端开发者Key，首次调用 load 时必填
                "version": '2.0',   // 指定要加载的 JS API 的版本，缺省时默认为 1.4.15 "2.0"
                "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等 鹰眼
            }).then((AMaps)=>{
                AMap = AMaps;
                Map = new AMap.Map(this.$refs.minMap,{  //设置地图容器id
                    viewMode:"2D",    //是否为3D地图模式
                    zoom:2,           //初始化地图级别 5
                    center: [107.635951,33.218144],//mapVuex.mapConfig.center, //初始化地图中心点位置 [109.699734,31.809243] [105.438139,33.125266]
                    mapStyle: 'amap://styles/normal',
                    pitch:0, // 地图俯仰角度，有效范围 0 度- 83 度
                });
                
                this.mapstate = 0;
                // 地图加载完执行
                Map.on("complete", ()=>{
                    Map.setStatus({
                        dragEnable: false, // 禁止地图拖拽
                        zoomEnable: false // 禁止滚轮缩放地图
                    });
                    this.markerListFun({lng:107.635951, lat:33.218144})
                    Map.on('click', this.mapButton);
                    this.mapstate = 1;
                    resolve('缩略图加载完毕')
                });
            }).catch(e => {
                console.log('地图加载 报错', e);
                this.mapDownloadError();
            });
        });
    },
    mapDownloadError(){
        // 销毁地图，并清空地图容器 地图对象被注销，内存释放，地图容器被清空。
        if(Map){
            if(Map.destroy){
                Map.destroy();
                if(this.$refs.minMap.children.length == 0){
                    console.log("地图为空");
                    setTimeout(()=>{
                        this.mapstate = null;
                        this.addMapCase();
                    }, 3000);
                };
            };
        };
    },
    //地图重置
    resettingMap(){
        Map.setZoomAndCenter(5, [109.699734,31.809243], true, 2000); 
    },
    setMap(center, zoom){
        Map.setZoomAndCenter(zoom, [center.lng, center.lat], true, 2000); 
        this.markerListFun(center);
    },
    markerListFun(data){
        Map.clearMap();
        let boxContent = (s) =>{
            return `
            <div class="minmap_ico">
                <div class="map_border">
                </div>
            </div>`;
        };
        // 使用中心点作为标注位置
        markerList['box'] = new AMap.Marker({
            position: [data.lng, data.lat], // 使用计算得到的中心点坐标
            content: boxContent(), // 假设boxContent是一个函数，返回标注的HTML内容
            offset: new AMap.Pixel(0, 0),
            zIndex: 60,
        });
        Map.add(markerList['box']);

        // 为标记添加点击事件
        /* markerList['box'].on('click', function (e) {
            Map.setFitView([markerList['box']]); // 适应坐标
        }); */

    },
},
};
</script>
  
<style lang='scss' scoped>
.minMap_box{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.minMap_buttons{
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 9999;
}
#minMap{
    width: 100%;
    height: calc(100% + 20px);
}
</style>
<style lang='scss'>
.minmap_ico{
  position: absolute;
  top:0;
  left: 0;
  width: 0px;
  height: 0px;
    .minmap_ico_box {
        position: absolute;
        width: 160px;
        border-radius: 5px;
        background: linear-gradient(135deg, rgba(64, 158, 255) 0%, rgb(62, 142, 223) 100%,);
        color: #fff;
        left: -50px;
        bottom: 10px;
        font-size: 0.6em;
        white-space: normal; /* 确保文本能够换行 */
        padding: 4px;
        box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.2);
        transition: background-color 600ms ease;
        .minmap_ico_content{
            display: block;
        }
    }
    .minmap_ico_box:hover{
        transition: background-color 600ms ease;
        box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.3);
    }
}
.map_border{
    width:30px;
    height:30px;
    border:solid 2px #ffd900;
    z-index:999;
    position: absolute;
    top:-15px;
    left:-15px;
    box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.5);
}
</style>